<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
      <div class="header">待评价</div>
      <div class="body">
        <div>
          <div class="content">
            <div class="img_box">
              <img src="https://res.vmallres.com//uomcdn/CN/pms/202311/AF19D724A6A291829C7ED41D64C44D8E.jpg" alt="" class="img" width="100%" height="100%">
            </div>
            <div class="mes_box">
              <div class="mes_item">智界S7</div>
              <div class="mes_item">价格：249,800</div>
              <div class="mes_item">商品满意度<el-rate v-model="value" show-text></el-rate></div>
              <div class="mes_item">评分<el-rate v-model="value2" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate></div>
              <div class="mes_item">
          <el-statistic :value="like ? 521 : 520">
            <template slot="suffix">
              <span @click="like = !like" class="like">
                <i
                  class="el-icon-star-on"
                  style="color:red"
                  v-show="!!like"
                ></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
            </template>
          </el-statistic>
        </div>
            </div>
         </div>
        </div>
        <div class="scroll">
          <div>
            <div class="state-item1">
          <div>发表评论</div>
        </div>
            <div v-for="(item,index) in $store.state.messages" :key="index">
            <div class="content-item"><div class="item-delete">{{ item.content }}<div class="delete-i"><el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteCue(index)"></el-button></div></div>
              <div class="item-time">{{ item.time }}</div>
            </div>
          </div>
          </div>
        </div>
      </div>
      <div class="se">
        <div class="item">
            <el-input
              placeholder="请输入内容"
              v-model="textarea1"
              width="80%"
              clearable>
            </el-input>
            <el-button @click="addCue" v-if="con">发送评论</el-button>
            <el-button @click="addCue" v-else>补评</el-button>
          </div>
      </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      textarea1: '',
      value: null,
      value2: 3.7,
      like: true,
      nowDate: '',
      con: true,
      count: 0
    }
  },
  mounted () {
    this.$nextTick(() => {
    // eslint-disable-next-line no-undef
      this.scroll = new BScroll('.scroll', {
        click: true,
        mouseWheel: true
      })
    })
    this.currentTime()
  },
  methods: {
    addCue () {
      if (this.textarea1 !== '') {
        if (this.count === 0) {
          this.count++
          this.con = false
        }
        this.$message('评论成功')
        this.$store.commit('addCue', { content: this.textarea1, time: this.nowDate })
      }
    },
    currentTime () {
      setInterval(this.formatDate, 500)
    },
    formatDate () {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() // 日
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`
    },
    deleteCue (index) {
      this.$message('删除成功')
      this.$store.commit('delCue', index)
    }
  }
}
</script>

<style scoped>
.delete-i{
  margin-left:150px;
  margin-bottom: 20px;
}
.item-delete{
  display:flex;
  width:430px;
}
.state-item1-item{
  margin-left: 360px;
}
.state-item1{
  width:100%;
  display:flex;
}
.scroll{
  height: 405px;
  overflow: hidden;
}
.item-time{
  font-size:10px;
  color:gray;
  padding-left: 300px;
}
.like {
    cursor: pointer;
    font-size: 15px;
    display: flex;
  }
.header{
  width:100%;
  font-size: 16px;
  line-height: 46px;
  height: 46px;
  text-align: center;
  background: #fd4170;
  flex: 1;
  display: block;
  color: #fff;
}
.body{
width: 450px;
height: 570px;
overflow: hidden;
background-color: #fff
}
.item{
  height:40px;
  display: flex;
}
.content{
  width: 440px;
  height:150px;
  border: 1px solid gray;
  border-radius: 5px;
  margin: 5px;
  display: flex;
}
.img_box{
  width:120px;
  height:60px;
  border: 1px solid gray;
  border-radius: 5px;
  margin-top:5px;
  margin-left:5px;
}
.mes_item{
  margin: 6px;
  display: flex;
}
.content-item{
  width: auto;
  border: 1px solid gray;
  border-radius: 5px;
  margin: 5px;
  padding:5px;
  font-size:15px;
}
</style>
